<template>
	<view class="content">
		<view class="content-head" v-if="prizeNum <= 5 && !skipAnimation"></view>
		<view class="luck-scroll-box" v-if="prizeNum <= 5 && !skipAnimation">
			<!-- 抽奖标识线 -->
			<view class="lucky-line" />
			<view class="lucky-scroll-content">
				<lucky-scroll v-for="item in prizeNum" ref="luckyScrollRef" :key="`luckyScrollRef_${item}`"
					:dataList="imglist" @completed="(val) => endDraw(val, item)">
					<template v-slot="{ item, index }">
						<view class="item-lottry" :key="`item-lottry_${index}}}`">
							<image :src="item.detailImages"></image>
						</view>
					</template>
				</lucky-scroll>
			</view>
		</view>
		<!--  -->
		<view v-if="items.length > 0 && type == 'yfs'">
			<prizeDialog :items="items" :prizeData="prizeData" :dialogVisible="prizeDialogVisible" :grandType="type"
				@nextPrize="prizeOk" @prizeClose="prizeClose" :disable="zhenbei_iconDisable" />
		</view>
		<view v-else>
			<prizeDialog :prizeData="prizeData" :dialogVisible="prizeDialogVisible" @nextPrize="prizeOk"
				@prizeClose="prizeClose" :disable="zhenbei_iconDisable" />
		</view>

		<uni-popup ref="popup" type="conter" style="position: relative;z-index: 1000;" :mask-click="false">
			<view class="pay">
				<h3>分解成功</h3>
				<view class="sparBox">
					已分解为<span>{{ sparNum }}</span>晶石
				</view>
				<view class="footer">
					<view class="button" @click="sparTransitionZb()">兑换镇北币</view>
					<view class="button" @click="prizeOk()">再来一发</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupSuccess" type="conter" style="position: relative;z-index: 1000;" :mask-click="false">
			<view class="messageContent">{{ message }}</view>
		</uni-popup>

	</view>
</template>

<script>
import {
	newBox,
	peopleCj,
	getyfs,
	revokePackageSkus,
	sparTransitionZb,
	skuLevel,
} from "@/api/blind.js"
import {
	getSkus
} from "@/api/myBox.js";
import {
	dequeue
} from "@/api/payerMarket.js"
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js"
import prizeDialog from '@/pages/blind/index2/prizeDialog.vue'
import luckyScroll from '@/components/luckyScroll/luckyScroll.vue'
export default {
	components: {
		prizeDialog,
		luckyScroll
	},
	data() {
		return {
			winningId: '240', //中奖id
			title: 'Hello',
			currentImageIndex: 0, // 新增的变量，用于存储当前应该放大显示的图片索引
			isImageEnlarged: false, // 判断图片是否放大
			isImageClicked: false, // 判断图片是否被点击
			isRotating: true, // 判断图片是否旋转
			detail: {},
			imglist: [],
			list: {},
			prizeImage: "",
			showPreview: false,
			yfsList: {},
			prizePoolItems: [], //奖池数据
			prizeData: {}, //中奖数据
			prizeDialogVisible: false, //中奖弹窗
			prizeNum: 5, //中奖数量
			luckyScrollRefList: [],
			scrollNum: 0,
			adminList: [],
			// 一番赏类型
			type: null,
			// // 一番赏的id
			// yfsId: null,
			time: null,
			sparNum: 0, // 分解可得晶石数量
			message: "",
			times: null,
			msg: '',
			// 盒子id
			boxId: '',
			// 抽盒子的数量
			nums: null,
			skipAnimation: false,
			// 一番赏奖品等级
			items: [],
			// 分解时需要传支付的code值
			revokeCode: '',
			zhenbei_iconDisable: false,
		}
	},
	computed: {
		itemSize() {
			let height = uni.upx2px(450)
			let width = uni.upx2px(550)
			return [width, height]
		},
		swiperItemSize() {
			let height = uni.upx2px(650)
			let width = uni.upx2px(750)
			return [width, height]
		},
		lotteryItemSize() {
			let height = uni.upx2px(450)
			let width = uni.upx2px(550)
			return [width, height]
		},
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	watch: {
		disable(newVal) {
			console.log('disable prop changed:', newVal);
		}
	},
	onHide() {

	},
	async onLoad(e) {
		//  抽奖数量
		let _this = this
		_this.prizeNum = Number(e.num || 1)
		_this.msg = e.msg
		_this.skipAnimation = $getStorage('skipAnimation') == false ? false : true;
		uni.showLoading({
			title: '加载中...',
			mask: true // 防止用户在加载时进行其他操作
		})
		if (e.type) {
			_this.type = e.type
			_this.yfsList = JSON.parse($getStorage("yfsList"))
			_this.imglist = _this.yfsList
			_this.boxId = e.boxId
			_this.nums = e.num
			_this.revokeCode = e.code
			await skuLevel({
				type: 3,
				boxId: e.boxId
			}).then(res => {
				_this.items = res.data;
				console.log("_this.items", _this.items);

			})
			await getyfs(e.boxId, {
				num: e.num,
				code: e.code,
			}).then(res => {
				if (res.code == 200) {
					uni.hideLoading();
					_this.list = res.data || []
					for (var k in _this.list) {
						if (_this.list[k].presentBoxSku) {
							let presentBoxSku = {}
							presentBoxSku = _this.deepCopy(_this.list[k].presentBoxSku)
							_this.list.push(presentBoxSku)
						}
					}
					console.log(_this.list);
					// _this.getskuLevel();

					if (5 < _this.prizeNum || _this.skipAnimation) {
						_this.endDraw()
						return
					}
					// 执行抽奖动画
					_this.luckyScroll()
					_this.setdequeue()
				} else if (res.message == 'bt11352' || res.message == 'bt11353') {
					uni.hideLoading();
					// 返回上一个页面
					// console.log(uni.getSystemInfoSync().platform);
					if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
						// H5环境下使用history.back()进行返回
						history.back();
					} else {
						history.back();
					}
				}
			})
		} else {
			// 个人赏抽奖
			if (e.msg == 1) {
				_this.adminList = JSON.parse($getStorage("adminList"))
				_this.imglist = _this.adminList
				_this.boxId = e.boxId
				_this.nums = e.num
				_this.revokeCode = e.code
				peopleCj({
					boxId: e.boxId,
					code: e.code,
					num: e.num
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						// 返回的接口是否在list下
						_this.list = res.data?.list || []
						if (5 < _this.prizeNum || _this.skipAnimation) {
							_this.endDraw()
							return
						}
						// 执行抽奖动画
						_this.luckyScroll()
					} else if (res.message == 'bt11352' || res.message == 'bt11353') {
						uni.hideLoading();
						// 返回上一个页面
						// console.log(uni.getSystemInfoSync().platform);
						if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
							// H5环境下使用history.back()进行返回
							history.back();
						} else {
							history.back();
						}
					}

				})
			} else if (e.msg == 2) {
				// 无限赏抽奖
				_this.detail = JSON.parse($getStorage("details"))
				_this.imglist = _this.detail.boxSkuVo
				_this.nums = e.num
				_this.boxId = _this.detail.id
				_this.revokeCode = e.code
				newBox({
					boxId: _this.detail.id,
					code: e.code,
					num: e.num
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						_this.list = res.data?.list || []
						if (5 < _this.prizeNum || _this.skipAnimation) {
							_this.endDraw()
							return
						}
						// 执行抽奖动画
						_this.luckyScroll()
					} else if (res.message == 'bt11352' || res.message == 'bt11353') {
						uni.hideLoading();
						// 返回上一个页面
						// console.log(uni.getSystemInfoSync().platform);
						if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
							// H5环境下使用history.back()进行返回
							history.back();
						} else {
							history.back();
						}
					}

				})
			}

		}
		// 监听动画结束事件
		// uni.$on('animationend', this.handleAnimationEnd);

	},
	methods: {
		// 奖品等级
		// async getskuLevel() {
		// 	await skuLevel({
		// 		type: 3,
		// 		boxId: this.boxId
		// 	}).then(res => {
		// 		this.items = res.data;
		// 	})
		// },
		luckyScroll() {
			// 循环中奖列表this.list
			this.onOpenBox()
		},
		prizeOk() {
			uni.navigateBack({
				delta: 1
			})
			this.prizeDialogVisible = false
		},
		onOpenBox(indexNum) {
			// 中奖结果，以下是模拟抽奖结果
			// const val = Math.floor(Math.random() * this.imglist?.length)
			if (this.type == "yfs") {
				this.list.forEach((item, indexNum) => {
					console.log(this.list?.[indexNum]);
					const index = this.imglist?.findIndex(item => item.id === this.list?.[indexNum].boxSku?.id)
					// 是否单次抽奖
					const isOne = Number(this.prizeNum) === 1
					// 参数中奖结果和是否单次，true为单次，false为多次
					this.$refs.luckyScrollRef[indexNum].onOpenBox(index, isOne)
				})
			} else {
				this.list.forEach((item, indexNum) => {
					const index = this.imglist?.findIndex(item => item.id === this.list?.[indexNum]?.id)
					// 是否单次抽奖
					const isOne = Number(this.prizeNum) === 1
					// 参数中奖结果和是否单次，true为单次，false为多次
					this.$refs.luckyScrollRef[indexNum].onOpenBox(index, isOne)
				})
			}
		},
		prizeClose() {
			// let data = {
			// 	skuIds: []
			// }
			// for (var k in this.list) {
			// 	data.skuIds.push(this.list[k].id ? this.list[k].id : this.list[k].boxSku.id)
			// }
			// console.log(data.skuIds);
			// let itemList = data.skuIds.join(",");
			// const result = Array.from({
			// 	length: this.nums
			// }, () => this.boxId).join(',');
			// console.log(result, "一番");
			this.zhenbei_iconDisable = true;
			revokePackageSkus(this.revokeCode).then((res) => {
				if (res.code == 200) {
					this.sparNum = res.data
					this.$refs.popup.open('bottom')

				} else {
					this.sparNum = 0
					this.zhenbei_iconDisable = false
				}
			})
			clearTimeout(this.times);
			// this.prizeDialogVisible = false
		},
		endDraw() {
			this.prizeData = this.list
			this.scrollNum++
			if (5 < this.prizeNum || this.skipAnimation) {
				this.prizeDialogVisible = true
				return
			}
			if (this.prizeNum <= this.scrollNum) {
				this.timer && clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.prizeDialogVisible = true
				}, 3000)
			}
		},
		showPrize() {
			// 假设 this.list 中有中奖的详细信息
			if (this.list && this.list.detailImages) {
				// uni.previewImage({
				// 	urls: [this.list.detailImages] // 显示中奖的图片
				// });
				console.log();
				this.prizeImage = this.list.detailImages // 设置中奖图片
				this.showPreview = true // 显示预览

			}
		},
		setdequeue() {
			let that = this
			this.times = setTimeout(function () {
				dequeue(that.yfsId).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "您在当前页面停留时间过长，已退出当前队列",
							icon: 'none',
							duration: 4000,
						})
					}
				})
			}, 60000)
		},
		// 确认分解
		decompose() {
			let _this = this
			let data = {
				skuIds: []
			}
			for (var k in _this.list) {
				data.skuIds.push(_this.list[k].id)
			}
			getSkus(data).then(res => {
				if (res.code == 200) {
					_this.$refs.popup.close()
				} else {

				}
			})

		},
		// 兑换镇北币
		sparTransitionZb() {
			let _this = this
			let data = {
				userId: _this.userInfo.id,
				sparNum: _this.sparNum
			}
			sparTransitionZb(data).then((res) => {
				if (res.code == 200) {
					_this.message = res.message
					_this.$refs.popupSuccess.open("center")
					setTimeout(() => {
						_this.$refs.popupSuccess.close()
					}, 2000)

					_this.$refs.popup.close()
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: "error"
					});
				}
			})

		},
		// 数据深拷贝
		deepCopy(obj) {
			if (obj === null || typeof obj !== 'object') {
				return obj;
			}

			if (obj instanceof Date) {
				return new Date(obj.getTime());
			}

			if (Array.isArray(obj)) {
				return obj.reduce((arr, item, i) => {
					arr[i] = this.deepCopy(item);
					return arr;
				}, []);
			}
			if (typeof obj === 'object') {
				return Object.keys(obj).reduce((newObj, key) => {
					newObj[key] = this.deepCopy(obj[key]);
					return newObj;
				}, {});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background: linear-gradient(to right bottom, #090919, #233a47);
	height: 100vh;
	overflow: hidden;
}

.content-head {
	width: 100%;
	margin-top: 100rpx;
	height: 200rpx;
	background: url('../../../static/center/dialog_bg_top.png') center top no-repeat;
	background-size: auto 100%;
}

.luck-scroll-box {
	position: relative;
	display: flex;
	align-items: center;
	width: 80%;
	margin: 0 auto;
	min-height: 247rpx;
	max-height: 800rpx;
	border-radius: 30rpx;
	background: url("../../../static/center/dialog_bg.png") no-repeat;
	background-size: 100% 100%;
	padding: 80rpx 40rpx;
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
	z-index: 999;

	/* 弹框的z-index比遮罩层大 */
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('../../../static/center/border_top_bg.png') no-repeat;
		background-size: 100% auto;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('../../../static/center/border_bottom_bg.png') center bottom no-repeat;
		background-size: 100% auto;
	}
}

.lucky-scroll-content {
	width: 100%;
	align-items: center;
	// position: absolute;
	// top: 50%;
	// left: 50%;
	// transform: translate(-50%, -50%);
	overflow: hidden;
}

.lucky-btn {
	margin-top: 180rpx;
	width: 500rpx;
	background: url(../../../static/seach.png) center/cover no-repeat;
	color: #fff;
}

.list-item view,
.item-lottry {
	position: relative;
	width: 102rpx;
	height: 102rpx;
	margin: 0 auto;
	padding: 0 10rpx;
}

.item-lottry image {
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0.8;
}

.ring {
	width: 100vw;
	height: 50vh;
	transform-style: preserve-3d;
	display: flex;
	justify-content: space-around;
	align-items: center;
	animation: horizontalScroll 10s ease-out infinite;
	/* 10秒的水平滚动动画，减速过渡，无限循环 */
}

.ring image {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	opacity: 0.5;
	transition: opacity 0.2s;
	// background-image: linear-gradient(to bottom, black, rgb(240, 206, 173));
	// background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
	border: 3rpx solid rgb(240, 206, 173);
}

.ring image:hover {
	opacity: 1;
}

.ring image:nth-child(1) {
	transform: translate3d(0, 0, 0);
}

.ring image:nth-child(2) {
	transform: translate3d(500rpx, 0, 0);
}

.ring image:nth-child(3) {
	transform: translate3d(1000rpx, 0, 0);
}

.ring image:nth-child(4) {
	transform: translate3d(1500rpx, 0, 0);
}

.ring image:nth-child(5) {
	transform: translate3d(2000rpx, 0, 0);
}

.ring image:nth-child(6) {
	transform: translate3d(2500rpx, 0, 0);
}

.ring image:nth-child(7) {
	transform: translate3d(3000rpx, 0, 0);
}

.ring image:nth-child(8) {
	transform: translate3d(3500rpx, 0, 0);
}

.ring image:nth-child(9) {
	transform: translate3d(4000rpx, 0, 0);
}

.ring image:nth-child(10) {
	transform: translate3d(4500rpx, 0, 0);
}

@keyframes horizontalScroll {
	0% {
		transform: translateX(100vw);
	}

	100% {
		transform: translateX(-5300rpx);
		/* 调整为初始位置的前一个位置，使得最后一张图片后直接跟上第一张图片 */
	}
}

// 中奖记录
.winning-record {
	width: 80%;
	height: 80rpx;
	border: 3rpx solid rgb(240, 206, 173);
	border-radius: 20rpx;
	background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
	margin: 100rpx auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-around;

	image {
		width: 60rpx;
		height: 60rpx;
	}

	.winning-record-text {
		width: 85%;
		height: 100%;
		border-left: 1rpx solid rgb(240, 206, 173);

		// border: 1rpx solid white;
		.winning-record-text1 {
			width: 100%;
			// border: 1rpx solid white;
			display: flex;

			text {
				color: rgb(240, 206, 173);
				font-size: 40rpx;
				animation: scroll_show 5s infinite linear;
			}

			@keyframes scroll_show {
				0% {
					transform-origin: top;
					transform: scale3d(1, 1, 1) translateY(100%);
				}

				100% {
					transform-origin: top;
					transform: scale3d(1, 1, 1) translateY(-100%);
				}
			}
		}
	}
}

.lucky-line {
	height: calc(100% - 58rpx);
	width: 2px;
	background-color: #920ccf;
	position: absolute;
	top: 50%;
	z-index: 1;
	left: 50%;
	transform: translate(-50%, -50%);

	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: inherit;
		border-style: solid;
		border-width: 16px;
	}

	&::before {
		top: 0;
		border-color: #920ccf transparent transparent transparent;
	}

	&::after {
		bottom: 0;
		border-color: transparent transparent #920ccf transparent;
	}
}

.pay {
	width: 100%;
	background-color: #fff;
	border-radius: 50rpx 50rpx 0 0;
	padding: 30rpx 0;

	h3 {
		text-align: center;
	}

	.sparBox {
		padding: 100rpx 0;
		font-size: 44rpx;
		color: #333;
		text-align: center;
		vertical-align: text-bottom;

		span {
			color: #6c43ff;
			font-size: 48rpx;
			padding: 0 16rpx;
		}
	}

	.footer {
		text-align: center;

		.button {
			width: 300rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 15rpx;
			color: #fff;
			display: inline-block;
			background: url(../../../static/seach.png) center/ cover no-repeat;
		}

		.button+.button {
			margin-left: 40rpx;
		}
	}
}

.messageContent {
	width: 300rpx;
	height: 100rpx;
	background-color: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 32rpx;
	line-height: 100rpx;
	text-align: center;
	border-radius: 20rpx;
}
</style>